import React from 'react';
import { Form, Row, DatePicker, Button, Select, Input, Col } from 'antd';
import moment from 'moment';
const FormItem = Form.Item;
const { Option } = Select;
const SearchForm = ({ form: { getFieldDecorator, getFieldsValue, setFieldsValue }, onSearch, onClick, advanced, searchItem, resetForm, assemblyGroupList }) => {
  const onHandleAdvanced = () => {
    if (onClick) {
      onClick();
    }
  };

  const onChange = (value, type) => {
    setFieldsValue({ [type]: value })
  }

  const formItemLayout = {
    // 抽屉里面Form。二列的布局比例
    labelCol: {
      span: 8
    },
    wrapperCol: {
      span: 16
    }
  };
  return (
    <Form className="search-form">
      <Row gutter={24}>
        <Col span={5}>
          <FormItem label="装配组别代码"{...formItemLayout}>
            {/* 20220721 - 输入框改为带搜索下拉 */}
            {/* {getFieldDecorator('groupCode', {
              initialValue: searchItem.groupCode || undefined,
              // getValueFromEvent: (event) => {
              //   return event.target.value.replace(/\s+/g, "")
              // },
              // })(<Input placeholder="请输入装配组别代码" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
            })(
              <Select placeholder='请选择装配组别代码'
                allowClear
                optionFilterProp="children"
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              // onChange={(value) => onChange(value, 'assemblyGroup')}
              >
                {
                  assemblyGroupList.map(item => {
                    return <Option key={item.groupCode}>{item.groupCode}</Option>
                  })
                }
              </Select>
            )} */}
            {/* 20221011 - 带搜索下拉改为输入框 */}
            {getFieldDecorator('groupCode', {
              initialValue: searchItem.groupCode || undefined,
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
              })(<Input placeholder="请输入装配组别代码" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="装配组别"{...formItemLayout}>
            {/* 20220721 - 输入框改为带搜索下拉 */}
            {/* {getFieldDecorator('assemblyGroup', {
              initialValue: searchItem.assemblyGroup || undefined,
              // getValueFromEvent: (event) => {
              //   return event.target.value.replace(/\s+/g, "")
              // },
              // })(<Input placeholder="请输入装配组别" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
            })(
              <Select placeholder='请选择装配组别'
                allowClear
                optionFilterProp="children"
                showSearch
                filterOption={(input, option) =>
                  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                // onChange={(value) => onChange(value, 'groupCode')}
              >
                {
                  assemblyGroupList.map(item => {
                    return <Option key={item.groupCode}>{item.groupName}</Option>
                  })
                }
              </Select>
            )} */}

            {/* 20221011 - 带搜索下拉改为输入框 */}
            {getFieldDecorator('assemblyGroup', {
              initialValue: searchItem.assemblyGroup || undefined,
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
              })(<Input placeholder="请输入装配组别" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="物料编码"{...formItemLayout}>
            {getFieldDecorator('partCode', {
              initialValue: searchItem.partCode || '',
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(<Input placeholder="请输入物料编码" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={5}>
          <FormItem label="物料名称"{...formItemLayout}>
            {getFieldDecorator('partName', {
              initialValue: searchItem.partName || '',
              getValueFromEvent: (event) => {
                return event.target.value.replace(/\s+/g, "")
              },
            })(<Input placeholder="请输入物料名称" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
          </FormItem>
        </Col>
        <Col span={4} style={{ display: 'flex' }} className="serarch-btns">
          <FormItem>
            <Button icon="search" type="primary" onClick={() => onSearch(getFieldsValue())}>
              {'查询'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="primary" icon={advanced ? 'up' : 'down'} onClick={() => onHandleAdvanced()}>
              {'展开'}
            </Button>
          </FormItem>
          <FormItem>

            <Button type="default" icon={'redo'} onClick={() => resetForm()}>
              {'重置'}
            </Button>
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        {
          advanced ? <Col span={5}>
            <FormItem label="物料类型"{...formItemLayout}>
              {getFieldDecorator('bomType', {
                initialValue: searchItem.bomType || undefined
              })(
                <Select placeholder='请选择物料类型' allowClear >
                  <Option value={'1'}>标准件</Option>
                  <Option value={'2'}>配件</Option>
                  <Option value={'3'}>零件</Option>
                  <Option value={'4'}>周边物料</Option>
                </Select>
              )}
            </FormItem>
          </Col> : ''
        }
        {
          advanced ? <Col span={5}>
            <FormItem label="物料仓库"{...formItemLayout}>
              {getFieldDecorator('storeCode', {
                initialValue: searchItem.storeCode || '',
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "")
                },
              })(<Input placeholder="请输入物料仓库" maxLength={20} allowClear onPressEnter={() => onSearch(getFieldsValue())} />)}
            </FormItem>
          </Col> : ''
        }
      </Row>

    </Form>
  );
};

export default Form.create()(SearchForm);
